define(function( require ) {
    var Marionette = require('marionette');

    var tpl = require('text!components/image/1.0.0/templates/image_list.html'),
        imageView = require('components/image/1.0.0/views/image_view'),
        Utils = require('core/utils');

    return Marionette.CompositeView.extend({
        className: 'modal fade hide',
        ui: {
            'pagenavi': '.js-pagenavi',
            'chooseButton': '.js-choose-image',
            'image': '.js-tab-pane-image',
            'upload': '.js-tab-pane-upload',
            'pane': '.tab-pane',
            'uploadButton': '.js-upload-image',
            'searchInput': '.js-modal-search-input'
        },
        events: {
            'click .pagenavi .fetch_page': 'handlePageNumClick',
            'click .pagenavi .goto-btn': 'handleGotoBtnClick',
            'keypress .pagenavi a.goto-input': 'handlePageNumKeypress',
            'click .js-choose-image': 'chooseImage',
            'click .js-update-image-list': 'update',
            'click .js-modal-tab': 'tab',
            'click .js-upload-image': 'uploadImage',
            'click .js-modal-search': 'update',
            'keydown .js-modal-search-input': 'search'
        },
        template: _.template(tpl),
        itemView: imageView,
        itemViewContainer: '.module-body',
        collectionEvents: {
            'sync': 'renderPagenavi',
            'select': 'toggleChooseButton'
        },
        initialize: function(obj) {
            this.opt = obj.options;

            this.update();
            var that = this;
            this.listenTo(window.NC, 'image:upload:always', function() {
                that.ui.uploadButton.button('reset');
            });

            this.listenTo(this.collection, 'image:choose:success', this.chooseImage);
            this.listenTo(window.NC, 'image:upload:success', this.update);
        },
        tab: function(e) {
            var $tar = $(e.target),
                $li = $tar.parent();
            $li.addClass('active');
            $li.siblings('li').removeClass('active');


            var pane = $tar.data('pane');

            this.ui.pane.addClass('hide');
            this.ui[pane].removeClass('hide');
        },

        handlePageNumClick: function(e) {
            var $target = $(e.currentTarget);
            var p = +$target.data('page-num');
            this.gotoPage(p);
        },

        handlePageNumKeypress: function(e) {
            var p = +$(e.currentTarget).text();
            if (!Utils.isNumber(e)) {
                e.preventDefault();
            }
            if (e.keyCode === Utils.keyCode.ENTER) {
                this.gotoPage(p);
                e.preventDefault();
            }
        },

        handleGotoBtnClick: function(e) {
            var p = +this.$('.pagenavi .goto-input').text();
            this.gotoPage(p);
        },

        gotoPage: function(p) {
            this.collection._pageNumber = p;
            this._fetch();
        },

        update: function() {
            this._fetch();
        },
        search: function(e) {
            e.stopPropagation();

            if (e.keyCode == Utils.keyCode.ENTER) {
                this._fetch();
                e.preventDefault();
            }
        },
        _fetch: function() {
            if(this.opt.onlyUpload === true){
                return;
            }

            this.$el.addClass('image-loading');

            var keyword = '';
            if (_.isFunction(this.ui.searchInput.val)) {
                keyword = this.ui.searchInput.val();
            }

            var url = Utils.addParameter(this.collection.url, {
                p: this.collection._pageNumber,
                keyword: keyword
            });

            var that = this;
            this.collection.fetch({
                url: url,
                success: function() {
                    that.$el.removeClass('image-loading');
                }
            });
        },
        chooseImage: function() {
            var selectedImages = this.collection.getSelectedImages();
            window.NC.trigger('image:choose:success', selectedImages, {upload: false});
            this.clearAllSelected();
        },
        clearAllSelected: function() {
            this.collection.clearAllSelected();
            this.$('li.selected').removeClass('selected');
        },
        renderPagenavi: function() {
            // 列表翻页
            this.ui.pagenavi.html(this.collection.pagenavi);
        },
        toggleChooseButton: function(number, model) {
            if (number > 0) {
                this.ui.chooseButton.removeClass('hide');
            } else {
                this.ui.chooseButton.addClass('hide');
            }
        },
        uploadImage: function(e) {
            this.ui.uploadButton.button('loading');
            window.NC.trigger('image:upload');
        }
    });
});
